<template>
    <div class="logistics">
        <header-bar title="发货"></header-bar>
        <div class="logistics-form">
            <div class="logistics-tips">
                <p>请认真核对快递单号</p>
                <p>确认后快递单号不可修改</p>
            </div>
            <ul class="form-items">
                <li>
                    <div class="item-tit">快递单号</div>
                    <div class="item-con">
                        <input type="text" maxlength="32" v-model="form.deliveryNum">
                    </div>
                </li>
                <li>
                    <div class="item-tit">快递公司</div>
                    <div class="item-con">
                        <input type="text" maxlength="32" v-model="form.deliveryCompany">
                        <div class="item-right" @click="selectCompany">快速选择</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="btn_bg">
            <button class="btn btn_green medium" :class="{'disabled':btnFlag}" @click="submit">确定</button>
        </div>
    </div>
</template>
<script>
import HeaderBar from "@/components/header.vue";
import { mapState, mapActions } from 'vuex'
export default {
  components: {
    HeaderBar,
  },
  beforeRouteEnter (to, from, next) {
      if(from.path!='/logisticsCompany'){
          sessionStorage.removeItem('logisticsCompany');
          sessionStorage.removeItem('logisticsInfo');
      }
      next();
  },
  created() {
      let logisticsCompany = sessionStorage.getItem('logisticsCompany');
      let logisticsInfo = sessionStorage.getItem('logisticsInfo');
      
      //获取页面数据
      if(logisticsInfo){
          let data = JSON.parse(logisticsInfo);
        //   this.form.deliveryCode = data.deliveryCode;
        //   this.form.deliveryCompany = data.deliveryCompany;
        //   this.form.deliveryNum = data.deliveryNum;
          this.form = {
              ...data
          }
      }
      if(logisticsCompany){
          let data = JSON.parse(logisticsCompany);
          this.form.deliveryCode = data.value;
          this.form.deliveryCompany = data.name;
      }
      this.form.orderId = this.$route.query.orderId;
      console.log(logisticsCompany)
  },
  data() {
      return {
          form:{
              orderId:'',
              deliveryNum:'',
              deliveryCode:'',
              deliveryCompany:'',
          }
      }
  },
  computed: {
      btnFlag(){
          const reg = /^[0-9a-zA-Z]+?$/;
          if(this.form.deliveryNum){
              if(!reg.test(this.form.deliveryNum) || this.form.deliveryNum.length>32){
                  return true;
              }
          }
          if(this.form.deliveryCompany&&this.form.deliveryCompany.length>32){
              return true;
          }
          return !(this.form.deliveryNum&&this.form.deliveryCompany);
      }
  },
  methods: {
      ...mapActions(['toggleLoading','showMsg','showModal']),
      selectCompany(){
          sessionStorage.setItem('logisticsInfo',JSON.stringify(this.form));
          this.$router.push({path:'logisticsCompany',query:{title:this.form.deliveryCompany}})
      },
      submit(){
          if(this.btnFlag){
              return false;
          }
          this.toggleLoading({flag:true});
          this.$ajax.orderDeliver(this.form).then(res=>{
              this.toggleLoading({flag:false});
              if(res.code=='0000'){
                  this.showMsg({ content: '提交成功'});
                  this.$router.back();
              }
          })
      }
  },
}
</script>
<style lang="less" scoped>
    .logistics{
        .logistics-form{
            padding: 0 .3rem;
            .logistics-tips{
                p{
                    &:nth-child(1){
                        margin: .44rem 0 .2rem;
                        font-size: .48rem;
                        color: #323746;
                        font-weight:400;
                    }
                    &:nth-child(2){
                        color: #999;
                        font-weight:400;
                        font-size: .24rem;
                    }
                }
            }
            .form-items{
                font-weight: 400;
                margin-top: .36rem;
                &>li{
                    border-bottom: .02rem solid #DDD;
                    .item-tit{
                        color: #999;
                        font-size: .22rem;
                        margin-top: .3rem;
                    }
                    .item-con{
                        display: flex;
                        align-items: center;
                        height: .72rem;
                        input{
                            flex: 1;
                            height: 100%;
                            color: #333;
                            font-size: .32rem;
                        }
                        .item-right{
                            width: 1.52rem;
                            border-left: .02rem solid #DDD;
                            text-align: center;
                            color: #999;
                        }
                    }
                }

            }
        }
        .btn_bg{
            margin-top: .88rem;
        }
    }
</style>